<template>
  <gimi-dialog
    v-model="visible"
    okText="我知道了"
    title="成员列表"
    width="600px"
    hiddenCancel
    @ok="emits('close-modal', hasRemove)"
    @cancel="emits('close-modal', hasRemove)"
  >
    <div class="share-user-content">
      <div class="table" v-show="bakUserList.length">
        <div class="thead">
          <div class="th">
            <div class="td">用户</div>
            <div class="td">角色</div>
            <div class="td">操作</div>
          </div>
        </div>
        <div class="tbody">
          <div class="tr" v-for="item in bakUserList" :key="item.id">
            <div class="td">{{ item.nickname }}</div>
            <div class="td">只读成员</div>
            <div class="td"><span class="delete" @click="handleRemoveShare(item.id)">移除</span></div>
          </div>
        </div>
      </div>
      <p class="empty" v-show="!bakUserList.length">暂无数据</p>
    </div>
  </gimi-dialog>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps, watch, PropType } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { apiRemoveMindShare } from '@/apis/work'
import type { User } from '@/types'

const props = defineProps({
  userList: {
    type: Array as PropType<User[]>,
    default: () => []
  },
  mindId: String
})

const emits = defineEmits(['close-modal'])
const visible = ref(true)

const bakUserList = ref<User[]>([])
watch(() => props.userList, newVal => {
  bakUserList.value = JSON.parse(JSON.stringify(newVal))
}, { deep: true, immediate: true })

const hasRemove = ref(false)
const handleRemoveShare = async (targetId) => {
  await ElMessageBox.confirm(
    '确认要移除该成员对该导图的查看权限？',
    '移除提示',
    {
      confirmButtonText: '移除',
      cancelButtonText: '我再想想',
      type: 'warning',
      showClose: false
    }
  )
  const idx = props.userList.findIndex(m => m.id === targetId)
  await apiRemoveMindShare({ targetId, mindId: props.mindId })
  bakUserList.value.splice(idx, 1)
  ElMessage.success('操作成功')
  hasRemove.value = true
}
</script>

<style lang="scss" scoped>
.share-user-content {
  .table {
    max-height: 400px;
    overflow-y: scroll;
    .th, .tr {
      display: flex;
      .td {
        padding: 6px 12px;
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
    .th {
      color: #999;
    }
    .tr {
      color: #555;
    }
    .delete {
      color: #a31010;
      cursor: pointer;
    }
  }

  .empty {
    color: #999;
    text-align: center;
    padding: 22px 0;
  }
}
</style>
